<!-- 入库提交页面 -->
<script setup lang="ts">
import { ref, watch } from 'vue'
import DataselectDan from '@/components/Dataselect/DataselectDan.vue'
import sanheyicopy from '@/components/sanheyi copy.vue'
// 此组件用于入库提交页面
//单据日期
const billsdate = ref('')
//入库类型
const storageType = ref('')
//供应商
const supplier = ref('')
//客户
const customer = ref('')
//部门
const department = ref('')
//备注
const remark = ref('')

let formData = ref({
    billsdate: billsdate.value,
    storageType: storageType.value,
    supplier: supplier.value,
    customer: customer.value,
    department: department.value,
    remark: remark.value,
})


//提交
const submit = () => {
     formData.value.billsdate = billsdate.value
        formData.value.storageType = storageType.value
        formData.value.supplier = supplier.value
        formData.value.customer = customer.value
        formData.value.department = department.value
        formData.value.remark = remark.value
}


</script>

<template>
    <!-- 入库提交页面内容将在此处编写 -->
    <view class="storage-submit-container">
        <!-- 顶部标题栏 -->
        <TopBar title="WCS提交"></TopBar>
        <view class="date-picker-section">
            <!-- 日期 -->
            <view class="data-select">
                <view>
                    单据日期:
                </view>
                <DataselectDan v-model:date="billsdate"></DataselectDan>
            </view>
            <sanheyicopy titleMinwidth="80px" v-model:input1="storageType" title1="入库类型" :isShowbutton1="true"
                :is-showcheckbox2="false">
            </sanheyicopy>
            <sanheyicopy titleMinwidth="80px" v-model:input1="supplier" title1="供应商" :isShowbutton1="true"
                :is-showcheckbox2="false">
            </sanheyicopy>
            <sanheyicopy titleMinwidth="80px" v-model:input1="customer" title1="客户" :isShowbutton1="true"
                :is-showcheckbox2="false">
            </sanheyicopy>
            <sanheyicopy titleMinwidth="80px" v-model:input1="department" title1="部门" :isShowbutton1="true"
                :is-showcheckbox2="false">
            </sanheyicopy>
            <sanheyicopy titleMinwidth="80px" v-model:input1="remark" title1="备注" :isShowbutton1="true"
                :is-showcheckbox2="false">
            </sanheyicopy>
            <view style="color: red; text-align: center; font-size: 12px;">注意：‘*’为必填项</view>
            <view>{{ formData.billsdate }}</view>
            <view>{{ formData.storageType }}</view>
            <view>{{ formData.supplier }}</view>
            <view>{{ formData.customer }}</view>
            <view>{{ formData.department }}</view>
            <view>{{ formData.remark }}</view>


        </view>
        <view class="submit-button">

            <button class="submit-btn" @click="submit">提交</button>



        </view>
    </view>
</template>

<style scoped>
/* 样式代码将在此处编写 */
.storage-submit-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* margin-top: 40px; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    /* align-items: center; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    min-height: 100vh;
    background-color: #F7F3F1;
    /* background-image: url("/src/static/log/Loginbg3.png"); */
    background-size: 100% 100%;
}

.date-picker-section {
    width: 96%;
    /* height: 100px; */
    background-color: hsl(53, 46%, 89%);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    margin: 0px 10px;
}

.data-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit-btn {
    width: 30%;
    height: 30px;
    background-color: #FF9900;
    color: #fff;
    border-radius: 10px;
    font-size: 20px;
    line-height: 30px;
}
</style>
